<!DOCTYPE html>
<html>


	<!-- Mirrored from www.zi-han.net/theme/hplus/table_data_tables.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 20 Jan 2016 14:20:01 GMT -->
	<head>

		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">


		<title>流程实例管理</title>
		<meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
		<meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

		<link rel="shortcut icon" href="favicon.ico">
		<link href="css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
		<link href="css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">

		<!-- Data Tables -->
		<link href="css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet">

		<link href="css/animate.min.css" rel="stylesheet">
		<link href="css/style.min862f.css?v=4.1.0" rel="stylesheet">

		<style>
			.col-sm-2{
         width:12.666667%
      }




    </style>
	</head>

	<body class="gray-bg">
		<div class="wrapper wrapper-content animated fadeInRight">
			<div class="row">
				<div class="col-sm-12">
					<div class="ibox float-e-margins">
						<div class="ibox-title">
							<h5>流程实例管理 <small>查看，查找，新建沟通任务</small></h5>
							<div class="ibox-tools">
								<a class="collapse-link">
									<i class="fa fa-chevron-up"></i>
								</a>
								<a class="dropdown-toggle" data-toggle="dropdown" href="table_data_tables.html#">
									<i class="fa fa-wrench"></i>
								</a>
								<ul class="dropdown-menu dropdown-user">
									<li><a href="table_data_tables.html#">选项1</a>
									</li>
									<li><a href="table_data_tables.html#">选项2</a>
									</li>
								</ul>
								<a class="close-link">
									<i class="fa fa-times"></i>
								</a>
							</div>
						</div>
						<div class="ibox-content">
							<div class="row">
								<div class="col-sm-2">
									<div class="input-group">
										<select id="deleteReason" class="input-sm form-control input-s-sm inline">
											<option value="">结束方式</option>
											<option value="completed">已回复</option>
											<option value="ownerDelete">发起人取消</option>
										</select>
										<span class="input-group-btn"><button type="button" class="btn btn-sm btn-primary" onclick="tableRefresh()">
												搜索</button> </span>
									</div>
								</div>
							</div>

							<table class="table table-striped table-bordered table-hover dataTables-example">
								<thead>
									<tr>
										<th>流程实例ID</th>
										<th>流程定义ID</th>
										<th>活动开始时间</th>
										<th>活动结束时间</th>
										<th>活动开始ID</th>
										<th>活动结束ID</th>
										<th>操作</th>
									</tr>
								</thead>
								<tbody>
								</tbody>
							</table>

						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="modal inmodal" id="addLinkUpModal" tabindex="-1" role="dialog" aria-hidden="true">
			<div class="modal-dialog modal-lg">
				<div class="modal-content animated bounceInRight">
					<!--            <input type="hidden" id="processDefinitionId">-->
					<!--            <input type="hidden" id="processInstanceId">-->
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">关闭</span>
						</button>
						<h4 class="modal-title">创建沟通任务</h4>
					</div>
					<div class="modal-body">
						<form method="get" class="form-horizontal">
							<div class="form-group">
								<label class="col-sm-2 control-label">流程定义ID</label>

								<div class="col-sm-10">
									<input type="text" class="form-control" id="processDefinitionId" readonly>
								</div>
							</div>
							<div class="hr-line-dashed"></div>
							<div class="form-group">
								<label class="col-sm-2 control-label">流程实例ID</label>

								<div class="col-sm-10">
									<input type="text" class="form-control" id="processInstanceId" readonly>
								</div>
							</div>
							<div class="hr-line-dashed"></div>
							<div class="form-group">
								<label class="col-sm-2 control-label">沟通信息</label>

								<div class="col-sm-3">
									<select id="assignee" class="input-sm form-control input-s-sm inline">
										<option value="">选择沟通对象</option>
										<option>张三</option>
										<option>李四</option>
										<option>王五</option>
										<option>唐伯虎</option>
										<option>祝枝山</option>
									</select>
								</div>
								<div class="col-sm-5">
									<input type="text" class="form-control" id="description" onfocus="MyProcessInstance.methods.clearInput(this)">
								</div>
								<div class="col-sm-2">
									<button type="button" class="btn btn-primary" onclick="MyProcessInstance.methods.addMsg()">
										<span class="glyphicon glyphicon-plus" aria-hidden="true">添加消息</span>
									</button>
								</div>
							</div>
							<div class="hr-line-dashed"></div>
							<div class="form-group">
								<label class="col-sm-2 control-label">消息展示</label>

								<div class="col-sm-10">
									<div class="input-sm form-control input-s-sm inline" id="displayMsg" style="height:auto;min-height:35px"></div>
								</div>
							</div>
							<div class="hr-line-dashed"></div>
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
						<button type="button" class="btn btn-primary" onclick="MyProcessInstance.methods.createLinkUpTask()">
							保存
						</button>
					</div>
				</div>
			</div>
		</div>
		<script src="js/jquery.min.js?v=2.1.4"></script>
		<script src="js/bootstrap.min.js?v=3.3.6"></script>
		<script src="js/plugins/jeditable/jquery.jeditable.js"></script>
		<script src="js/plugins/dataTables/jquery.dataTables.js"></script>
		<script src="js/plugins/dataTables/dataTables.bootstrap.js"></script>
		<script src="js/content.min.js?v=1.0.0"></script>
		<script src="js/plugins/layui-v2.4.5/layui/layui.all.js"></script>
		<script src="js/common.js"></script>

		<!--<script>-->
		<!--        $(document).ready(function(){$(".dataTables-example").dataTable();-->
		<!--        var oTable=$("#editable").dataTable();oTable.$("td").editable("http://www.zi-han.net/theme/example_ajax.php",{"callback":function(sValue,y){var aPos=oTable.fnGetPosition(this);oTable.fnUpdate(sValue,aPos[0],aPos[1])},"submitdata":function(value,settings){return{"row_id":this.parentNode.getAttribute("id"),"column":oTable.fnGetPosition(this)[2]}},"width":"90%","height":"100%"})});function fnClickAddRow(){$("#editable").dataTable().fnAddData(["Custom row","New row","New row","New row","New row"])};-->

		<!--</script>-->
		<!--<script type="text/javascript" src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script>-->

		<script>
			var _table = "";
			$(document).ready(function() {
				_table = $('.dataTables-example').DataTable({
					responsive: true,
					serverSide: true,
					searching: false,
					bLengthChange: false,
					// paging: false,
					sort: false,
					ajax: {
						url: 'http://localhost:8080/instance/list',
						dataSrc: 'data',
						type: "GET",
						data: function(d) {}
					},
					language: {
						"sProcessing": "处理中...",
						"sLengthMenu": "显示 _MENU_ 项结果",
						"sZeroRecords": "没有匹配结果",
						"sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
						"sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
						"sInfoFiltered": "(由 _MAX_ 项结果过滤)",
						"sInfoPostFix": "",
						"sSearch": "过滤:",
						"sUrl": "",
						"sEmptyTable": "表中数据为空",
						"sLoadingRecords": "载入中...",
						"sInfoThousands": ",",
						"oPaginate": {
							"sFirst": "首页",
							"sPrevious": "上页",
							"sNext": "下页",
							"sLast": "末页"
						},
						"oAria": {
							"sSortAscending": ": 以升序排列此列",
							"sSortDescending": ": 以降序排列此列"
						}
					},
					columns: [{
							"data": "processInstanceId"
						},
						{
							"data": "processDefinitionId"
						},
						{
							"data": "startTime"
						},
						{
							"data": "endTime"
						},
						{
							"data": "startActivityId"
						},
						{
							"data": "endActivityId"
						},
						//预留操作位
						{
							"data": "operate"
						}
					],
					columnDefs: [{
							// 所有的列不允许搜索
							"orderable": false,
							"targets": "_all"
						},
						{
							"targets": 2,
							"render": function(val, b, c, d) {
								if (!val) {
									return '未插入时间';
								}
								return common.timestampToTime(val);

							}
						},
						{
							"targets": 3,
							"render": function(val, b, c, d) {
								if (!val) {
									return '活动未结束...';
								}
								return common.timestampToTime(val);
							}
						},
						{
							// 最后一列 不可过滤搜索
							"targets": -1,
							"render": function(val, b, row, d) {
								return '<a processDefinitionId="' + row.processDefinitionId + '" processInstanceId="' + row.processInstanceId +
									'" onclick="MyProcessInstance.methods.openLinkUpTaskModal(this)" data-toggle="modal" data-target="#addLinkUpModal" onmouseover="common.btnDesc(this)" btnDesc="创建沟通任务"><span class="glyphicon glyphicon-plus" aria-hidden="true" style="color:#1ab394"></span></a>';
							}
						}
					],
				});
			});

			function tableRefresh() {
				_table.ajax.reload();
			}



			var MyProcessInstance = {
				data: {
					assigneeWithPushMsgs: []
				},
				methods: {
					tableRefresh: function() {
						_table.ajax.reload();
					},
					createLinkUpTask: function() {
						var processDefinitionId = $("#processDefinitionId").val();
						var processInstanceId = $("#processInstanceId").val();

						var linkUpTaskCreateDto = {
							processDefinitionId: processDefinitionId,
							processInstanceId: processInstanceId,
							assigneeWithPushMsgs: MyProcessInstance.data.assigneeWithPushMsgs
						}
						common.server.post('http://localhost:8080/linkup/task/create',linkUpTaskCreateDto);
					},
					openLinkUpTaskModal: function(_this) {
						var processDefinitionId = $(_this).attr("processDefinitionId");
						$("#processDefinitionId").val(processDefinitionId);

						var processInstanceId = $(_this).attr("processInstanceId");
						$("#processInstanceId").val(processInstanceId);

						MyProcessInstance.methods.clearDataWhenOpenAddLinkUpTaskModal();
					},
					addMsg: function() {
						//接收消息者
						var assignee = $("#assignee").val();
						//发送的消息
						var description = $("#description").val();

						//校验消息
						if (!assignee) {
							common.msg.error("请选择消息接收人")
							return;
						}
						if (!description) {
							common.msg.error("请输入消息内容")
							return;
						}
						//展示
						var text = '<hr><span style="padding:5px">' + assignee + ': ' + description + '<span/>'
						$("#displayMsg").append(text);

						//组装消息
						var assigneeWithPushMsg = {
							assignee: assignee,
							description: description
						}
						MyProcessInstance.data.assigneeWithPushMsgs.push(assigneeWithPushMsg);

					},
					clearInput: function(_this) {
						$(_this).val('');
					},
					clearDataWhenOpenAddLinkUpTaskModal() {
						MyProcessInstance.data.assigneeWithPushMsgs = [];
						$("#displayMsg").html("");
						$("#assignee").val("");
						$("#description").val("");
					}

				}
			}
		</script>

	</body>


	<!-- Mirrored from www.zi-han.net/theme/hplus/table_data_tables.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 20 Jan 2016 14:20:02 GMT -->
</html>
